<template>
  <div>
    <h1>课程列表</h1>
    <el-button
      size="small"
      type="success"
      @click="$router.push('/courses/create')"
      >创建课程</el-button
    >
    <el-table :data="data.data" border stripe>
      <el-table-column
        v-for="col in columns"
        :prop="col.prop"
        :key="col.prop"
        :label="col.label"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="{ row }">
          <el-button
            @click="$router.push(`/courses/edit/${row._id}`)"
            type="success"
            size="small"
            >修改</el-button
          >
          <el-button type="danger" @click="remove(row)" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component({})
export default class CourseList extends Vue {
  data = []

  columns = [
    {
      prop: '_id',
      label: 'ID'
    },
    {
      prop: 'name',
      label: '名称'
    },
    {
      prop: 'coverImg',
      label: '封面图'
    }
  ]

  // 删除
  async remove (item: any) {
    try {
      await this.$confirm('确定删除吗?')
    } catch (error) {
      return
    }

    await this.$http.delete(`/courses/${item._id}`)
    this.$message.success('删除成功')
    this.fetch()
  }

  async fetch () {
    const result = await this.$http.get('courses')

    this.data = result.data
  }

  created () {
    this.fetch()
  }
}
</script>
